<template>
  <div>
    <!-- Multiple Rows -->
    <el-row :gutter="10" v-if="this.config.timeRange.length>1 && chart.data">
      <el-col
        :md="24"
        :lg="12"
        :xl="8"
        v-for="(data,index) in chart.data"
        :key="index"
        :style="{marginBottom:'10px'}"
      >
        <el-card :body-style="{padding:'10px'}" shadow="hover">
          <!-- <div slot="header" class="clearfix">
            <span>{{data.label}}</span>
          </div>-->
          <!-- <p v-if="data.rows.length==0" :style="{textAlign:'center'}">无数据</p> -->
          <!-- <div v-if="data.rows.length>0"> -->
          <div>
            <ve-pie
              v-if="type=='pie'||type=='pieRose'"
              :height="chart.config.height"
              :data="data"
              :data-empty="data.rows.length==0"
              :settings="chart.settings"
              :extend="chart.extend[index]"
            ></ve-pie>
            <ve-ring
              v-if="type=='ring'||type=='ringRose'"
              :height="chart.config.height"
              :data="data"
              :data-empty="data.rows.length==0"
              :settings="chart.settings"
              :extend="chart.extend[index]"
            ></ve-ring>
            <ve-waterfall
              v-if="type=='waterfall'"
              :height="chart.config.height"
              :data="data"
              :data-empty="data.rows.length==0"
              :settings="chart.settings"
              :extend="chart.extend[index]"
            ></ve-waterfall>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- Single Row -->
    <!-- <div v-if="this.config.timeRange.length==2 && chart.data[0]&&chart.data[0].rows.length>0"> -->
    <div v-if="this.config.timeRange.length===1 && chart.data[0]!=null">
      <ve-pie
        v-if="type=='pie'||type=='pieRose'"
        :height="chart.config.height"
        :data="chart.data[0]"
        :data-empty="chart.data[0].rows.length==0"
        :settings="chart.settings"
        :extend="chart.extend[0]"
      ></ve-pie>
      <ve-ring
        v-if="type=='ring'||type=='ringRose'"
        :height="chart.config.height"
        :data="chart.data[0]"
        :data-empty="chart.data[0].rows.length==0"
        :settings="chart.settings"
        :extend="chart.extend[0]"
      ></ve-ring>
      <ve-waterfall
        v-if="type=='waterfall'"
        :height="chart.config.height"
        :data="chart.data[0]"
        :data-empty="chart.data[0].rows.length==0"
        :settings="chart.settings"
        :extend="chart.extend[0]"
      ></ve-waterfall>
      <!-- <p :style="{textAlign:'center'}">{{chart.data[0].label}}</p> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["source", "config"],
  data() {
    return {
      chart: {
        settings: {},
        extend: [],
        data: {},
        config: {
          height: "500px",
          label: {
            show: true,
            formatter: "{b}: {c}\n{d}%",
            // fontSize: 14
          },
        },
      },
    };
  },
  computed: {
    type() {
      return this.config.type;
    },
  },
  methods: {
    setChart() {
      this.chart.settings["offsetY"] = 270;
      if (this.type == "pie" || this.type == "pieRose") {
        this.chart.settings["radius"] = 160;
      }
      if (this.type == "ring") {
        this.chart.settings["radius"] = [120, 160];
      }
      if (this.type == "ringRose") {
        this.chart.settings["radius"] = [60, 160];
      }
      if (this.type == "pieRose" || this.type == "ringRose") {
        this.chart.settings["roseType"] = "radius";
      }
    },
    fetchData() {
      let source = this.source;
      let config = this.config;
      let data = [];
      let extend = [];
      let filter = {
        keyword: config.filter.keyword,
        values: config.filter.value.split(" "),
      };
      // date range round
      // console.log(this.config.title);
      for (let i = 0; i < this.config.timeRange.length; i++) {
        // console.log(this.config.timeRange[i]);
        // fetch data
        let keywords = [];
        let columns = ["关键字", "次数"];
        if (config.summary) columns[1] = "分值";
        let rows = [];
        let minTime = new Date(this.config.timeRange[i].min);
        let maxTime = new Date(this.config.timeRange[i].max);
        let label =
          "" +
          minTime.getFullYear() +
          "/" +
          (minTime.getMonth() + 1) +
          "/" +
          minTime.getDate() +
          " ~ " +
          maxTime.getFullYear() +
          "/" +
          (maxTime.getMonth() + 1) +
          "/" +
          maxTime.getDate() +
          "";
        for (let j = 0; j < source.length; j++) {
          let sourceTime = new Date(
            this.source[j].eventTime.replace(/-/g, "/")
          );
          // Time Range
          if (
            sourceTime.getTime() >= this.config.timeRange[i].min &&
            sourceTime.getTime() <= this.config.timeRange[i].max
          ) {
            // Filter
            if (
              filter.values.length === 0 ||
              config.filter.keyword === "" ||
              filter.values.indexOf(source[j][config.filter.keyword]) > -1
            ) {
              let idx = keywords.indexOf(source[j][config.keyword]);
              if (idx === -1) {
                keywords.push(source[j][config.keyword]);
                keywords.sort();
                idx = keywords.indexOf(source[j][config.keyword]);
                let row = {};
                row[columns[0]] = source[j][config.keyword];
                row[columns[1]] = 0;
                rows.splice(idx, 0, row);
              }
              if (config.summary) {
                rows[idx][columns[1]] += +source[j].value;
              } else {
                rows[idx][columns[1]]++;
              }
            }
          }
        }
        data.push({ columns: columns, rows: rows, label: label });
        extend.push({
          title: { subtext: label, bottom: 0 },
          label: this.chart.config.label,
        });
      }
      this.chart.data = data;
      this.chart.extend = extend;
      // console.log(JSON.stringify(this.chart.data));
    },
  },
  mounted() {
    this.setChart();
    this.fetchData();
  },
};
</script>